<template>
  <div class="my-video">
    <video-player
      class="video-player vjs-custom-skin"
      ref="videoPlayer"
      :playsinline="playsinline"
      :options="playerOptions"
      @play="onPlayerPlay($event)"
      @pause="onPlayerPause($event)"
      @statechanged="playerStateChanged($event)">
    </video-player>
  </div>
</template>

<script>
  import { videoPlayer } from 'vue-video-player'
  import 'video.js/dist/video-js.css'
  import 'vue-video-player/src/custom-theme.css'

  export default {
    name: "my-video",
    components: {
      videoPlayer
    },
    props: {
      videoUrl: String,
      state: Boolean
    },
    computed: {
      player () {
        return this.$refs.videoPlayer.player
      }
    },
    watch: {
      videoUrl: function (val) { // 更改视频源 videoUrl从弹出框组件传值
        if (val !== '') {
          this.$refs.videoPlayer.player.src(val)
        }
      },
      state: function (val) { //弹出框关闭后暂停 否则一直在播放 state从弹出框组件传值
        if (val) {
          console.log('closeModal')
          this.$refs.videoPlayer.player.pause()
        }
      }
    },
    data () {
      return {
        playsinline: false,
        playerOptions: {
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          autoplay: false,
          muted: false,
          loop: false,
          preload: 'auto',
          language: 'zh-CN',
          aspectRatio: '16:9',
          fluid: true,
          sources: [{
            type: 'video/mp4',
            src: this.videoUrl
          }],
          poster: require('../../assets/bg.png'),
          width: document.documentElement.clientWidth,
          notSupportedMessage: '此视频暂无法播放，请稍后再试'
        }
      }
    },
    methods: {
      onPlayerPlay (player) {},
      onPlayerPause (player) {},
      playerStateChanged (player) {}
    }
  }
</script>

<style scoped lang="less">
.my-video{
  width: 100%;
  height: 100%;
  video{
    outline: none;
  }
}
.vjs-modal-dialog{
  outline: none!important;
}
.vjs-error-display{
  outline: none!important;
}
</style>
